<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 未完成版 -->
    <canvas width="600" height="400"></canvas>
    <script>
        var myCanvas = document.querySelector("canvas");
        var ctx = myCanvas.getContext("2d");


        // 饼状图函数
        var precentChart = function(ctx){
            this.ctx = ctx || document.querySelector("canvas").getContext("2d");

            this.canvasHeight = this.ctx.canvas.height;
            this.canvasWidth = this.ctx.canvas.width;        
            
            this.data = [10,30,20,5];
            this.angleList = [];
            this.PreangleList = [];
            this.Total = 0;
           
            this.prePosition = 0;
            this.x0 = 200;
            this.y0 = 200;
            this.r = 100;
            
            this.lineLength = 20;

            this.data = []; 
        }

        precentChart.prototype.init = function(data){
            // this.drawChart(data);
            // this.drawintro();
            for(key in arr){
                console.log(arr[key]);
            }
        }

        precentChart.prototype.drawChart = function(data){
            var that = this;
            this.data = data;
            data.forEach(function(item,i){
                that.Total += item.value;
                console.log(item);
            });
      
            
            data.forEach(function(item,i){
                that.ctx.beginPath();
                // 算出每一项对应的弧度
                var angle = Math.PI * 2 * (item/that.Total);
                that.angleList.push(angle);
                that.ctx.moveTo(that.x0,that.y0);
                that.ctx.arc(that.x0,that.y0,that.r,that.prePosition, angle+that.prePosition);
                that.ctx.fillStyle = getRandomColor();
                that.ctx.closePath();
                that.ctx.fill();
                that.PreangleList.push(that.prePosition);
                that.prePosition = angle + that.prePosition;
                that.ctx.stroke();
            });
        }
        precentChart.prototype.drawintro = function(){
            var that = this;
            
            this.data.forEach(function(item,i){
                 // 1. 确定伸出去的点的坐标
                var edgeX = that.x0 + Math.cos(that.PreangleList[i] + that.angleList[i]/2)*(that.lineLength + that.r);
                var edgeY = that.y0 + Math.sin(that.PreangleList[i] + that.angleList[i]/2)*(that.lineLength + that.r);

                that.ctx.beginPath();
                that.ctx.moveTo(that.x0 + Math.cos(that.PreangleList[i] + that.angleList[i]/2)*that.r ,that.y0 + Math.sin(that.PreangleList[i] + that.angleList[i]/2)* that.r);
                that.ctx.lineTo(edgeX,edgeY);
                that.ctx.stroke();
            });


        }
        var data = (
            china: 1, usa: "newyork,washington,atlanta", japan: "tokyo"
        );
       
        
        var precentChart = new precentChart();
        precentChart.init(data);
        // // 年龄分布图
        // /*  16-20 10个
        //     21-25 30个
        //     26-30 10个
        //     31-35 5个 
        // */
        // var data = [10,30,20,5];
        // var angleList = [];
        // var Total = 0;
        // data.forEach(function(item,i){
        //     Total += item; 
        // });
        // var prePosition = 0;
        // data.forEach(function(item,i){
        //     ctx.beginPath();
        //     // 算出每一项对应的弧度
        //     var angle = Math.PI * 2 * (item/Total);
        //     angleList.push(angle);
        //     ctx.moveTo(100,100);
        //     ctx.arc(100,100,100,prePosition, angle+prePosition);
        //     ctx.fillStyle = getRandomColor();
        //     ctx.closePath();
        //     ctx.fill();
        //     prePosition = angle +prePosition;
        //     ctx.stroke();
        // });
        function getRandomColor(){
            var RandomColor = "rgb("+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+")";
            return RandomColor; 
        };

    </script>
    
</body>
</html>